<template>
<div class="news">
  <!--导航区-->
  <ul>
    <li v-for="news in newsList" :key="news.id">
<!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{news.title}}</RouterLink>-->
      <button @click="showNewsDetail(news)">查看新闻</button>
      <RouterLink
          :to="{
        name:'ll',
        query:{
          id:news.id,
          title:news.title,
          content:news.content
        }
      }">{{news.title}}</RouterLink>
    </li>
  </ul>
  <!--展示区-->
  <div class="news-content">
<!--<router-view></router-view>-->
    <RouterView/>
  </div>
</div>
</template>

<script setup lang="ts" name="News">
import {reactive} from "vue";
import {useRouter,RouterView,RouterLink} from "vue-router";
import News from "@/views/News.vue";
const newsList=reactive([
  {id:'001',title:'食物',content:'vegetable'},
  {id:'002',title:'学',content:'Java wcnm!'},
  {id:'003',title:'吃惊',content:'明天周一'},
  {id:'004',title:'好消息',content:'爆金币了'},
])
const  router=useRouter()
//ts 接口限制类型
interface NewsInter{
  id:string,
  title:string,
  content:string
}
//函数式控制路由跳转与前面的标签逻辑一致 :+ts接口类型传递一致/:any
function  showNewsDetail(news:NewsInter){
  router.replace({
    name:'ll',
    query: {
      id: news.id,
      title: news.title,
      content: news.content
    }
  })
}

</script>

<style scoped>
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
  background-color: #f5f5f5; /* 示例：添加背景色 */

  /* 添加更多的样式渲染 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  border-radius: 5px; /* 圆角效果 */
}

.news ul {
  margin-top: 30px;
  /*list-style: none;*/
  padding-left: 10px;
}
.news li::marker{
  color: palevioletred;
}
/* 添加更多的样式渲染 */
.news li {
  position: relative; /* 为链接添加相对定位 */
  padding: 10px; /* 链接内边距 */
}

.news li a {
  color: #333; /* 链接颜色 */
  text-decoration: none; /* 无下划线 */
}

.news li a:hover {
  background-color: #ddd; /* 鼠标悬停时的背景色 */
}
</style>